<!DOCTYPE html>
<html>
<head>
	<title>中介者模式应用</title>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script src="中介者模式基础版.js"></script>
</head>
<body>
	<h1>Chat</h1>
	<form id="chatForm">
	    <label for="fromBox">Your Name:</label>
	    <input id="fromBox" type="text"/>
	    <br />
	    <label for="toBox">Send to:</label>
	    <input id="toBox" type="text"/>
	    <br />
	    <label for="chatBox">Message:</label>
	    <input id="chatBox" type="text"/>
	    <button type="submit">Chat</button>
	</form>

<div id="chatResult"></div>
<script>
	$( "#chatForm" ).on( "submit", function(e) {
    e.preventDefault();

    // Collect the details of the chat from our UI
    var text = $( "#chatBox" ).val(),
        from = $( "#fromBox" ).val(),
        to = $( "#toBox" ).val();

    // Publish data from the chat to the newMessage topic
    mediator.publish( "newMessage" , { message: text, from: from, to: to } );
});

// Append new messages as they come through
function displayChat( data ) {
    var date = new Date(),
        msg = data.from + " said \"" + data.message + "\" to " + data.to;

    $( "#chatResult" )
        .prepend("\
					<p>\
					    " + msg + " (" + date.toLocaleTimeString() + ")\
					</p>\
				");
}

// Log messages
function logChat( data ) {
    if ( window.console ) {
        console.log( data );
    }
}

// Subscribe to new chat messages being submitted
// via the mediator
mediator.subscribe( "newMessage", displayChat );
mediator.subscribe( "newMessage", logChat );

// The following will however only work with the more advanced implementation:

// function amITalkingToMyself( data ) {
//     return data.from === data.to;
// }

// function iAmClearlyCrazy( data ) {
//     $( "#chatResult" ).prepend("\
// <p>\
//     " + data.from + " is talking to himself.\
// </p>\
// ");
// }

 // mediator.Subscribe( amITalkingToMyself, iAmClearlyCrazy );
</script>
</body>
</html>